<template>
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh;">
		<hx-navbar :title="info.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="content">
	
				<view class=""  :class="{'biankuang':ktheme==='black'}">
					<view class="goodslist">
						<view class="sort">
							<view class="sort_box">
								<!-- <view class="sort_box-item" style="width: 50%;">
										<text class="asc" :class="{'active': order =='give_time desc'}"
											@click="setOrder('give_time desc')">最新上架</text>
									</view> -->
								<view class="sort_box-item"  :style="[seltyle]">
									<text class="asc" :class="{'active': order}" @click="setOrder(true)">价格升序</text>
								</view>
								<view class="sort_box-item"  :style="[seltyle]">
									<text class="desc" :class="{'active': !order}" @click="setOrder(false)">价格降序</text>
								</view>
							</view>
						</view>
						<!-- <scroll-view class="scroll" scroll-y="true" @scrolltolower="lower"> -->
				 
						<view class="list">
								<template v-for="(item, index) in list">
									<view class="item" :key="index">
										<view class="ceil" style="width: 47%;">
											<view class="label">
												<image
													:src="!item.market_lock_status?'/static/mart/shou.png':'/static/mart/lock.png'"
													mode="aspectFit"></image>
												<text>{{item.tokenId}}</text>
											</view>
											<!-- <view class="name">发行方：{{item.author_name}}</view> -->
										</view>
										<view class="ceil" style="width: 30%;">
											<view class="price">
												<text class="unit">￥</text><text>{{item.price|fp}}</text>
											</view>
											<view class="name">寄售价格</view>
										</view>
										<view class="ceil" style="width:20%;">
											<view class="buy" :style="{background:buttonBcak}" @tap="go_detail(item)"
												v-if="!item.payLock">
												立即购买
											</view>
											<view v-else class="status">支付中</view>
										</view>
									</view>
								</template>
							</view>
						
					</view>
						<!-- </scroll-view> -->
				<!-- 回到顶部 -->
				 <view class="scrollClsss" v-if="ifscroll" @click="scrollClick(0)">
				 	<image src="@/static/user/huojian.png" style="width: 110rpx;" mode="widthFix"></image>
			
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifscroll:false,
					scrollTop: 0,
				borderSty: this.$store.state.borderSty, //邊框
				knavTitleColor: this.$store.state.knavTitleColor, //字体暂用
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				ColorSize: this.$store.state.ColorSize, //背景顔色
				seltyle: {
					'--ColorSize': this.$store.state.ColorSize, //背景顔色

					'--borderSty': this.$store.state.borderSty, //邊框
				},
				id: '',
				list: [],
				page: 1,
				isLoading:false,
				hasNextPage: true,
				limit: 10,
				order: true,
				info: {
					mang_list: []
				},
			}
		},
		onPullDownRefresh() {
		this.get_data_list();
			uni.stopPullDownRefresh();
		},
		onLoad(options) {
			this.id = options.iid;
			this.get_info()
			this.get_data_list()
			console.log("lxs--------", this.id)
		},
		
		onReachBottom(){
			console.log("滑动",this.hasNextPage)
			if (this.hasNextPage) {
				this.page = this.page + 1;
				let data = {
					pageNo: this.page,
					  limit:20,
					iid: this.id,
					orderBy: 'price',
					asc: this.order
				}
				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getMarketGoodsListt(data, res => {
					console.log("res----",res)
					if (res.status) {
						this.list = this.list.concat(res.data);
						this.hasNextPage = res.data.length >= this.limit;
					//	this.page = new_page
					}
				})
			}
		},
	
	//滑动显示火箭返回顶部
/* 	onPageScroll(e) {
		if (this.scrollTop >= 230) {
			this.ifscroll = true
		} else {
			this.ifscroll = false
		}
		this.scrollTop = e.scrollTop;
	}, */
		methods: {
			go_detail: function(item) {
				if (item.status == 2) {
					this.$common.errorToShow('该商品正在交易中，看看别的吧')
					return;
				}
				uni.navigateTo({
					url: '/pages/mart/mart_details?id=' + item.nftId
				})
			},
			scrollClick(val) {
				uni.pageScrollTo({
					scrollTop: val,
					duration: 100,
				})
				this.scrollTop = val
			},
			setOrder: function(order) {
				this.order = order;
				this.get_data_list()
			},
			get_data_list: function() {
				this.page = 1
				this.hasNextPage = true;
				let data = {
					pageNo: this.page,
					  // limit: this.limit,//不生效
					iid: this.id,
					orderBy: 'price',
					asc: this.order

				}

				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getMarketGoodsListt(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
			get_info() {
				if (!this.id) {
					this.$common.errorToShow('商品失效')
					uni.navigateBack()
					return;
				}
				let userToken = this.$db.get("userToken");
				let data = {
					sn: this.id
				}
				if (userToken) {
					data.token = userToken;
				}
				this.$api.getGoodsDetails(this.id, res => {
					if (res.status) {
						this.info = res.data;
					}
				})
			},
		},
	
	}
</script>

<style lang="scss" scoped>
	 
	.btntk {
		width: 590rpx;
		height: 80rpx;
		margin: 10rpx auto;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
	}

	.biankuang {
		padding: 0;
		margin: 0 auto;
		background: linear-gradient(0deg, #55CC7C 0%, #F5F97F 100%);
		border-radius: 15rpx;
		border: 10rpx solid;
		border-image: linear-gradient(0deg, #55CC7C, #F5F97F) 10 10;
		clip-path: inset(0 round 12rpx);
		width: 690rpx;
		// height: 700rpx;
	}
 
	.content {
		// padding: 0 40rpx;
		// padding-bottom: 80rpx;

		.goodslist {
	  width: 660rpx;
			// height: auto;
			background-color: #fcfff2;
			border-radius: 20rpx;
			margin: 30rpx auto;
			padding: 25rpx 20rpx 0 20rpx;

			.sort {
					  width: 610rpx;
				margin-bottom: 12rpx;

				.sort_box {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.sort_box-item {
						font-size: 32rpx;
						color: #666;
						position: relative;
					}

					.active {
						color: #000;
						font-weight: bold;
					}

					.active::after {
						display: block;
						clear: both;
						content: '';
						width: 56rpx;
						height: 7rpx;
						background: var(--ColorSize); //linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
						border-radius: 100rpx;
						position: absolute;
						left: 3rpx;
						bottom: -5rpx;
					}
				}
			}

		 

				.list {
					width: 650rpx;
					.item {
						padding: 36rpx 0;
						border-bottom: 1rpx solid #EBEBEB;
						display: flex;
						align-items: center;

						.ceil {
							.label {
								display: flex;
								align-items: center;

								image {
									width:40rpx;
									height:40rpx;
									display: block;
									margin-right: 5rpx;
								}

								text {
									font-size: 39rpx;//36
									color: #000;
									font-weight: bold;
								}
							}

							.name {
								font-size: 28rpx;
								color: #999;
								font-weight: 500;
								margin-top: 5rpx;
							}

							.price {
								text {
									font-size: 39rpx;
									color: #000;
									font-weight: bold;
								}

								.unit {
									font-size: 27rpx;
								}
							}

							.buy {
								width: 130rpx;
								height: 49rpx;
								border-radius: 100rpx;
								text-align: center;
								line-height: 49rpx;
								font-size: 18rpx;
								color: #fff;
								font-weight: 500;
							}

							.status {
								width: 120rpx;
								height: 42rpx;
								background-color: #FFE4E8;
								border-radius: 45rpx;
								text-align: center;
								line-height: 42rpx;
								font-size: 18rpx;
								color: #863A3A;
								font-weight: 500;
							}
						}
					}

					&>view:last-child {
						border-bottom: 0;
					}
				}
		 
		}
	}
	.scrollClsss {
		position: fixed;
		bottom: 220rpx;
		right: -16rpx;
		z-index: 999;
		width: 120rpx;
		height: 100rpx;
	}
</style>